// Version 1 core UI design contracts. Public behavior remains in @wrnexus/ui. export const CORE_COMPONENT_CONTRACTS = { Button: { contractVersion: 1, component: "Button", source: "packages/ui/components/button.wrn", family: "actions", support: "recipe-supported", axes: { variant: { default: "default", values: ["default", "destructive", "ghost", "link", "outline", "secondary", "solid"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, size: { default: "default", values: ["default", "icon", "icon-lg", "icon-sm", "icon-xs", "lg", "sm", "xs"], }, pill: { default: "false", values: ["false", "true"], }, }, parts: { root: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, control: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', loading: '[aria-busy="true"]', }, elements: ["a", "button"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", "rotate", ], }, spinner: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, copy: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, label: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, description: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, tooltip: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [ "btn-color", "btn-contrast", "color-bg", "color-border", "color-border-strong", "color-danger", "color-info", "color-muted", "color-primary", "color-primary-contrast", "color-success", "color-surface", "color-surface-soft", "color-text", "color-warning", "control-height", "control-height-lg", "control-height-sm", "ease-emphasized", "ease-standard", "highlight-edge", "motion-base", "motion-fast", "radius-sm", "shadow-1", "shadow-2", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Input: { contractVersion: 1, component: "Input", source: "packages/ui/components/input.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { states: { hover: ":hover", invalid: '[data-invalid="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, heading: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, label: { states: { hover: ":hover", }, elements: ["label"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, hint: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, controlContainer: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, control: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, elements: ["input"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, floatingLabel: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, help: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, error: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-input-border-hover", "color-input-placeholder", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Textarea: { contractVersion: 1, component: "Textarea", source: "packages/ui/components/textarea.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { states: { hover: ":hover", invalid: '[data-invalid="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, heading: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, label: { states: { hover: ":hover", }, elements: ["label"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, hint: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, controlContainer: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, control: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, elements: ["textarea"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, floatingLabel: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, help: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, error: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [ "color-border", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Select: { contractVersion: 1, component: "Select", source: "packages/ui/components/select.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { states: { hover: ":hover", invalid: '[data-invalid="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, heading: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, label: { states: { hover: ":hover", }, elements: ["label"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, hint: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, controlContainer: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, control: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, elements: ["select"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, indicator: { states: { hover: ":hover", }, elements: ["svg"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, floatingLabel: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, help: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, error: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-input-border-hover", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Checkbox: { contractVersion: 1, component: "Checkbox", source: "packages/ui/components/checkbox.wrn", family: "selection", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { states: { hover: ":hover", invalid: '[data-invalid="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, heading: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, hint: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, control: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', checked: ":checked", }, elements: ["input"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, copy: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, help: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, error: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Radio: { contractVersion: 1, component: "Radio", source: "packages/ui/components/radio.wrn", family: "selection", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { states: { hover: ":hover", invalid: '[data-invalid="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, heading: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, hint: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, control: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', checked: ":checked", }, elements: ["input"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, copy: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, help: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, error: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Switch: { contractVersion: 1, component: "Switch", source: "packages/ui/components/switch.wrn", family: "selection", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { states: { hover: ":hover", invalid: '[data-invalid="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, heading: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, hint: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, control: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', checked: ":checked", }, elements: ["input"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, help: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, error: { states: { hover: ":hover", }, elements: ["small"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Card: { contractVersion: 1, component: "Card", source: "packages/ui/components/Card.wrn", family: "surfaces", support: "recipe-supported", axes: { size: { default: "md", values: ["compact", "default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["accent", "default", "top-border"], }, radius: { default: "default", values: ["default", "lg"], }, shadow: { default: "default", values: ["default", "none"], }, }, parts: { root: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, group: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, panel: { states: { hover: ":hover", }, elements: ["article"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", "rotate", ], }, media: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, content: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, subtitle: { states: { hover: ":hover", }, elements: ["p"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, description: { states: { hover: ":hover", }, elements: ["p"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, action: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, elements: ["a"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, overlay: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, overlayShade: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, header: { states: { hover: ":hover", }, elements: ["header"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, heading: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, eyebrow: { states: { hover: ":hover", }, elements: ["p"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, headerActions: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, navigation: { states: { hover: ":hover", }, elements: ["nav"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, control: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, elements: ["select"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, tabs: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, tabBadge: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, alert: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, body: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, empty: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, footer: { states: { hover: ":hover", }, elements: ["footer"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, customFooter: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: ["header", "footer"], tokens: [ "card-color", "card-icon-color", "card-max-height", "card-padding", "color-border", "color-danger", "color-danger-text", "color-info", "color-info-text", "color-muted", "color-primary", "color-primary-text", "color-secondary", "color-secondary-text", "color-success", "color-success-text", "color-surface", "color-surface-2", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "color-warning-text", "component-color", "component-scale", "ease-emphasized", "font-mono", "font-sans", "motion-base", "radius", "radius-md", "radius-sm", "shadow-1", "shadow-2", "space-panel", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Alert: { contractVersion: 1, component: "Alert", source: "packages/ui/components/alert.wrn", family: "feedback", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "info", values: ["danger", "dark", "info", "light", "primary", "secondary", "success", "warning"], }, variant: { default: "soft", values: ["action", "link", "soft"], }, radius: { default: "md", values: ["lg", "md", "none", "sm", "xl"], }, shadow: { default: "sm", values: ["lg", "md", "none", "sm"], }, }, parts: { root: { states: { hover: ":hover", }, elements: ["section"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, body: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, title: { states: { hover: ":hover", }, elements: ["strong"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, actions: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, dismiss: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, elements: ["button"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [ "alert-color", "alert-ink", "alert-soft", "color-border", "color-danger", "color-danger-text", "color-info", "color-info-text", "color-muted", "color-primary", "color-primary-text", "color-secondary", "color-success", "color-success-text", "color-surface", "color-text", "color-text-muted", "color-warning", "color-warning-text", "component-color", "component-scale", "font-sans", "radius", "radius-sm", "shadow-1", "shadow-2", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Modal: { contractVersion: 1, component: "Modal", source: "packages/ui/components/Modal.wrn", family: "overlays", support: "recipe-supported", axes: { size: { default: "md", values: ["full", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default", "outline", "soft", "solid"], }, }, parts: { root: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, trigger: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: '[data-wrn-open="true"]', }, elements: ["button"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, triggerSlot: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, layer: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, backdrop: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: '[data-wrn-open="true"]', }, elements: ["button"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, panel: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["section"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, header: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["header"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, heading: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, headingCopy: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, close: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: '[data-wrn-open="true"]', }, elements: ["button"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, body: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, footer: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["footer"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, customFooter: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, actions: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, button: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: '[data-wrn-open="true"]', }, elements: ["button"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, spinner: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: ["trigger", "header", "footer"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-soft", "color-info", "color-info-contrast", "color-info-soft", "color-on-danger", "color-primary", "color-primary-contrast", "color-primary-soft", "color-secondary", "color-secondary-contrast", "color-secondary-soft", "color-success", "color-success-contrast", "color-success-soft", "color-surface", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "color-warning-soft", "color-warning-text", "control-height", "highlight-edge", "radius-lg", "radius-sm", "shadow-1", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Nav: { contractVersion: 1, component: "Nav", source: "packages/ui/components/Nav.wrn", family: "navigation", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success"], }, size: { default: "default", values: ["default", "lg", "sm"], }, }, parts: { root: { states: { hover: ":hover", }, elements: ["nav"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, toggle: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, elements: ["button"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, toggleBar: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, toggleText: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, list: { states: { hover: ":hover", }, elements: ["ul"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, item: { states: { hover: ":hover", }, elements: ["li"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, link: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: '[aria-current="page"]', }, elements: ["a"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, label: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, badge: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, arrow: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, submenu: { states: { hover: ":hover", }, elements: ["ul"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [ "color-border", "color-danger", "color-info", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "highlight-edge", "radius", "radius-sm", "shadow-1", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, ContextMenu: { contractVersion: 1, component: "ContextMenu", source: "packages/ui/components/ContextMenu.wrn", family: "overlays", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "raised", values: ["outline", "raised", "soft"], }, }, parts: { root: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, trigger: { states: { hover: ":hover", open: '[data-wrn-open="true"]', focusVisible: ":focus-visible", active: ":active", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, dismissLayer: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: '[data-wrn-open="true"]', }, elements: ["button"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, panel: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, header: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, items: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, divider: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, sectionLabel: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, item: { states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: '[data-wrn-open="true"]', selected: '[data-selected="true"]', }, elements: ["a", "button"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, copy: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, status: { states: { hover: ":hover", open: '[data-wrn-open="true"]', }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: ["trigger", "header", "footer"], tokens: [ "color-border", "color-danger", "color-danger-soft", "color-focus", "color-info", "color-info-soft", "color-primary", "color-primary-soft", "color-secondary", "color-secondary-soft", "color-success", "color-success-soft", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "color-warning-soft", "context-max-width", "context-min-width", "context-x", "context-y", "font-mono", "highlight-edge", "radius", "radius-sm", "shadow-3", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, PageHeader: { contractVersion: 1, component: "PageHeader", source: "packages/ui/components/PageHeader.wrn", family: "typography", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default", "minimal", "raised", "soft", "solid", "tinted"], }, }, parts: { root: { states: { hover: ":hover", }, elements: ["section"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, decoration: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, glow: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, gridPattern: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, inner: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, breadcrumb: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, layout: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, content: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, intro: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, iconWrap: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, icon: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, copy: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, eyebrowRow: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, eyebrowMark: { states: { hover: ":hover", }, elements: ["span"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, eyebrow: { states: { hover: ":hover", }, elements: ["p"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, title: { states: { hover: ":hover", }, elements: ["h1"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, description: { states: { hover: ":hover", }, elements: ["p"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, meta: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, actions: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, body: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: ["meta", "actions"], tokens: [ "color-background", "color-border", "color-danger", "color-danger-muted", "color-danger-soft", "color-danger-text", "color-info", "color-info-muted", "color-info-soft", "color-info-text", "color-primary", "color-primary-muted", "color-primary-soft", "color-primary-text", "color-secondary", "color-secondary-muted", "color-secondary-soft", "color-secondary-text", "color-success", "color-success-muted", "color-success-soft", "color-success-text", "color-surface", "color-surface-raised", "color-text", "color-text-muted", "color-warning", "color-warning-muted", "color-warning-soft", "color-warning-text", "shadow-sm", ], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, Container: { contractVersion: 1, component: "Container", source: "packages/ui/components/Container.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["comfortable", "compact", "default", "spacious"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { states: { hover: ":hover", }, elements: ["div"], properties: [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", ], }, }, slots: [], tokens: [], constraints: [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "keyboard", "narrow", "long-content", ], compatibility: { engine: 1, componentContract: 1, }, }, } as const;